<template>
  <div>
    <!-- 头部导航 end -->
    <!-- 背景 start-->
    <div class="bg_nav">
      <img :src="newbg" />
      <!-- <img src="img/web/starbg.png"> -->
    </div>
    <!-- 背景 end -->
    <no-ssr placeholder="Loading...">
      <full-page :options="options">
        <div class="section">
          <div class="box1">
            <!-- 居中容器 start -->
            <div id="slider_one">
              <!-- 广告语 start-->
              <div class="slogan">
                <div>恋爱密室</div>
                <div>线上私密聊天，线下见面约会</div>
              </div>
              <!-- 广告语  end -->
              <!-- 轮播 导航  带连接 -->
              <div class="example">
                <div class="block">
                  <el-carousel trigger="click">
                    <el-carousel-item v-for="(item,index) in banarList" :key="index">
                      <a :href="item.hrefUrl">
                        <img :src="item.imgUrl" alt />
                      </a>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <!-- 轮播导航 end -->
              <!-- 下载按钮 -->
              <div class="down">
                <div class="down_contetion">
                  <div>
                    <img :src="downbg" />
                    <div>
                      <img :src="ioslog" />
                      <span>苹果点击下载</span>
                    </div>
                  </div>
                  <div>
                    <img :src="downbg" />
                    <div id="donwad" @click="andrioDown">
                      <img :src="anchorslog" />
                      <span>安卓点击下载</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 下载按钮 end -->
            </div>
            <!-- 居中容器 end -->
          </div>
        </div>
        <div class="section">
          <div class="box2">
            <div style="display: flex; justify-content: center;">
              <div class="tow_one">
                <div class="phone">
                  <img :src="phoneImg" />
                  <div class="phone_banar">
                    <el-carousel trigger="click" indicator-position="none">
                      <el-carousel-item>
                        <img :src="bannar1" alt />
                      </el-carousel-item>
                      <el-carousel-item>
                        <img :src="bannar2" alt />
                      </el-carousel-item>
                      <el-carousel-item>
                        <img :src="bannar3" alt />
                      </el-carousel-item>
                      <el-carousel-item>
                        <img :src="bannar4" alt />
                      </el-carousel-item>
                      <el-carousel-item>
                        <img :src="bannar5" alt />
                      </el-carousel-item>
                      <el-carousel-item>
                        <img :src="bannar6" alt />
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>
                <div class="text_content">
                  <div>
                    <span>等待你那把开启心门的钥匙</span>
                  </div>
                  <div>
                    <span>
                      每个人内心深处都有一个密室，只有那把意喻着真爱的密匙才能开启你的心门。在恋爱密室，
                      我们会带领着那个属于你的ta，跨过心门，走进密室，贴近你的灵魂。
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section">
          <div class="box3">
            <div class="section_header">
              <div>
                <div>
                  <div></div>
                </div>
                <div>恋爱秘籍</div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
            <div style="display: flex; justify-content: center;">
              <!-- 居中容器 start -->
              <div class="article_list">
                <div v-for="(item,index) of articleList" :key="index">
                  <div class="article_img">
                    <img :src="item.imgUrl + '?imageView2/1/w/280/h/150'" />
                  </div>
                  <div class="article_content" :value="item.id" @click="viewThisBlog(item.id)">
                    <div class="article_data">
                      <div class="article_content_title">
                        <span class="article_content_title_text">{{item.title }}</span>
                      </div>
                      <div class="article_content_litter">{{item.articleDesc}}</div>
                      <div class="article_review">
                        <div>
                          <span>{{new Date(item.createTime).format('yyyy-MM-dd')}}</span>
                        </div>
                        <div>
                          <span>{{item.commentNum}}</span>
                          <img :src="reviewbgUrl" />
                        </div>
                        <div>
                          <span>{{item.browseNum }}</span>
                          <img :src="eyegUrl" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 居中容器 end -->
            </div>
            <!-- 底部备注  友链  联系方式 .... start -->
            <div class="footer">
              <div class="footer_content">
                <div>云南楚雄市喵爪科技有限公司</div>
                <div>备案号：滇ICP备19006033号</div>
                <div>公司地址：云南省楚雄高新区永安路北侧彝人古镇玉兰苑</div>
              </div>
            </div>
            <!-- 底部备注  友链  联系方式 .... end -->
          </div>
        </div>
      </full-page>
    </no-ssr>
  </div>
</template>

<script>
import axios from "~/plugins/axios";
import { dateFormat } from "~/utils/index";
import md5 from "js-md5";
dateFormat();
export default {
  // middleware: 'isMobile',
  head() {
    return {
      title: "恋爱密室官网",
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "恋爱密室是一款私密且真实靠谱的交友app，每个人内心深处都有一个密室，只有那把意喻着真爱的密匙才能开启你的心门。在恋爱密室，我们会带领着那个属于你的ta，跨过心门，走进密室，贴近你的灵魂"
        },
        {
          name: "keywords",
          content: "恋爱密室，恋爱密室app，恋爱密室官网，恋爱密室下载"
        },
        {
          name:"baidu-site-verification",
          content:"7wwUEu4CwS"
        }
      ]
    };
  },
  async asyncData({ req, res }) {
      const ss = {
        classStr: "",
        page: 1,
        pageSize: 8,
        sign: md5(String(1) + String(8))
      };
      const [
        {
          data: { data }
        },
        {
          data: {
            data: { records }
          }
        }
      ] = await Promise.all([
        axios.post("https://www.lovemsss.cn/bg/operateWeb/getBanners"),
        axios.post(
          "https://www.lovemsss.cn/bg/operateWebArticle/pageListArticle",
          ss
        )
      ]);
      return {
        banarList: data, //bannar 图片
        articleList: records, // 文章列表  （8个)
        // host: req.headers
      };
  },
  name: "",
  data() {
    return {
      logoUrl: require("@/assets/article/logo.png"),
      eyegUrl: require("@/assets/article/eye.png"),
      reviewbgUrl: require("@/assets/article/review.png"),
      newbg: require("@/assets/home/newbg.jpg"),
      downbg: require("@/assets/home/downbtn.png"),
      anchorslog: require("@/assets/home/android.png"),
      ioslog: require("@/assets/home/ios.png"),
      phoneImg: require("@/assets/home/bannar/phone.png"),
      bannar1: require("@/assets/home/bannar/1.jpg"),
      bannar2: require("@/assets/home/bannar/2.jpg"),
      bannar3: require("@/assets/home/bannar/3.jpg"),
      bannar4: require("@/assets/home/bannar/4.jpg"),
      bannar5: require("@/assets/home/bannar/5.jpg"),
      bannar6: require("@/assets/home/bannar/6.jpg"),
      options: {
        licenseKey: "C7F41B00-5E824594-9A5EFB99-B556A3D5",
        afterLoad: this.afterLoad,
        scrollOverflow: true,
        scrollBar: false,
        menu: "#menu"
        // navigation: true,
        // anchors: ['page1', 'page2', 'page3'],
      }
    };
  },
//App.vue
beforeMount() {
  // console.log(this.host);
  
    if (this._isMobile()) {
      // this.$router.replace('/appdown');
    }
  },

  methods: {
    // 判断是 pc端还是移动端
    platform(){
      			var browser = {
              versions: function() {
                var u = navigator.userAgent,
                  app = navigator.appVersion;
                return { //移动终端浏览器版本信息
                  trident: u.indexOf('Trident') > -1, //IE内核
                  presto: u.indexOf('Presto') > -1, //opera内核
                  webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                  gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                  mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
                  ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                  android: u.indexOf('Android') > -1, //android终端或者uc浏览器
                  iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                  iPad: u.indexOf('iPad') > -1, //是否iPad
                  webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部

                };
            }(),
              language: (navigator.browserLanguage || navigator.language).toLowerCase()
            };
            if (browser.versions.android == true || browser.versions.ios == true) {
              console.log("sss");
              
            }
    },
    // 跳转到阅读选择的blog
    viewThisBlog(id) {
      var that = this;
      // 增加阅读量的接口
      axios
        .post("https://www.lovemsss.cn/bg/operateWebArticle/addbrowseNum", {
          articleId: id,
          sign: md5(String(id))
        })
        .then(res => {
          that.$router.push({ path: `/details/${id}` });
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //  安卓下载按钮
    andrioDown(){
      window.location.href="https://loveyouke.lovemsss.com/lams_app_10_jiagu_sign.apk"
    },
    // 苹果 下载按钮
    IosDown(){
    },
//App.vue
_isMobile() {
	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
	 return flag;
}

  }
};
</script>

<style  scoped>
@import "../assets/home/home.css";

/* 轮播样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 0.875rem;
  opacity: 0.75;
  line-height: 9.375rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.block,
.el-carousel {
  width: 100%;
  height: 100%;
  position: relative;
}
div >>> .el-carousel__container {
  height: 100%;
}
div >>> .el-carousel__item > a > img {
  width: 100%;
  height: 100%;
}
.phone_banar >>> .el-carousel__item > img {
  width: 100%;
  height: 100%;
}
.box3 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
@media  screen and (max-width: 1200px) {
    .example {
        width: 100%; padding: 0 50px;
    }
    .slogan {
        width: 100%; padding: 20px 50px;
    }
}
@media only screen and (max-width: 900px) {
  .article_list{
      justify-content: center;
    }
  .article_list>div{
      width: 40%;margin-left: 1.25rem;
    }
}
@media only screen and (max-width: 800px) {
   .example {
        height: 200px;
    }
    .box2{
        position: relative;height: 100%;
    }
    .box2>div{
      position: relative;height: 100%;
    }
    .phone{
      width: 46%;
    }
    .down_contetion {
      flex-direction: column;
    }
    .down_contetion>div img{
      transform: scale(.7)
    }
    .down_contetion>div>div{
      justify-content: center;
    }
    .down_contetion>div:nth-child(2){
      margin-top: 20px;
    }
    .tow_one{
      flex-direction: column; align-items: center;justify-content: flex-end;
    }
    .text_content{
      width: 100%; padding: 50px;
    }
    .text_content>div:first-child{
      text-align: center; font-size: 1.5rem;padding-bottom: 1.5rem;
    }
    .text_content>div:last-child{
      font-size: 1rem;
    }
}

@media only screen and (max-width: 550px) {
    .slogan>div:first-child {
      opacity: 0;
    }
    .slogan>div:last-child {
      font-size: 1.5rem;
    }
    .article_list{
      flex-direction: column;align-items: center;
    }
    .article_list>div{
      width: 80%;margin-left: 0;
    }
    .footer_content{
      font-size: 0.8rem;
    }
} 
</style>